<template>
  <div>
    <!-- <el-button @click="toExcel">excel导出</el-button>
    <el-button @click="toExcel2">转换数据导出excel</el-button> -->

    <!-- 上传组件
    标签：el-upload
               action:必传属性，后面如果使用http-request方式，也需要来个值 # /xxx
               name:'上传接口对应的字段名'
               show-file-list:是否显示上传文件列表
               before-upload:上传前的回调，常用于限制上传文件大小与类型
               on-success:上传成功的回调（使用默认上传，http-request和这个无关）
               http-request:自定义上传
 -->
    <hr>
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :http-request="httpRequest"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>
<script>
import { export_json_to_excel } from '@/vendor/Export2Excel'
import Cos from 'cos-js-sdk-v5'
/*
1:安装 cos-js-sdk-v5
2：导入
3：实例化（需要使用密钥）
4:调用上传方法
*/
const cos = new Cos({
  SecretId: 'AKIDNXR8bpeSF1JL8EyZopxRfdHgqGUeuEn8',
  SecretKey: 'HJ9mAbQEn7jgjY9swEI6yAamk7MN8hty'
})
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG,PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    httpRequest(res) {
      console.log(res)
      cos.putObject(
        {
          Bucket: 'dhf81-1305249343' /* 必须存储桶 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: Date.now() + '' /* 必须 */,
          StorageClass: 'STANDARD',
          Body: res.file, // 上传文件对象
          onProgress: (progressData) => {
            console.log(JSON.stringify(progressData))
          }
        },
        (err, data) => {
          if (!err) {
            this.imageUrl = 'http://' + data.Location
          }
          console.log(err || data)
        }
      )
    }
  },

  /*
     姓名     地址
     张三     深圳
     李四     广州

     header:['姓名','地址']
     data:[['张三','深圳'],['李四','广州']]

    */

  toExcel() {
    export_json_to_excel({
      multiHeader: [['81期', '', '', '']],
      header: ['姓名', '地址', '其它信息', ''],
      data: [
        ['张三', '深圳', 'a', 'b'],
        ['李四', '广州', 'c', 'd']
      ],
      merges: ['A1:D1', 'C2:D2'],
      filename: '测试excel下载'
    })
  },
  toExcel2() {
    // arr=[{name:'张三',address:'深圳'},{name:'李四',address:'广州'}]
    // 1：列出转换规则
    const arr = [
      { address: '深圳', name: '张三' },
      { name: '李四', address: '广州' }
    ]
    const rules = {
      姓名: 'name',
      地址: 'address'
    }
    // 2：循环原数组生成一个新数组
    // header:Object.keys(rules)
    const newArr = arr.map((item) => {
      // ['address','name']
      const temp = []
      // Object.values(rules)=['name','address']
      Object.values(rules).forEach((key) => {
        temp.push(item[key])
      })
      // templ.push(item.address)
      return temp
    })
    console.log(newArr)
    export_json_to_excel({
      header: Object.keys(rules),
      data: newArr,
      filename: '测试excel下载'
    })
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
